<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../../../layui/css/layui.css">
<link rel="stylesheet" href="../../../../../css/byking.css">
</head>
<body>
	<div class="byking-form" id="addsysuser">
		<form class="layui-form" action="">
		
			<div class="layui-form-item">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" name="username" required lay-verify="username"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">字母开头，允许5-16位字母数字下划线</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" required lay-verify="name"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">最多输入10位汉字,字母和数字</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">图像</label>
				<div class="layui-input-block">
					<input type="file" name="" lay-ext="zip|rar" lay-type="file" lay-title="请上传一张图片吧亲" class="layui-upload-file">      
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" required lay-verify="phone"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">禁用</label>
				<div class="layui-input-inline">
					<input type="radio" name="status" value="1" title="禁用"> 
					<input type="radio" name="status" value="0" title="启用" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="1" title="男"> 
					<input type="radio" name="sex" value="0" title="女" checked>
				</div>
			</div>
			
			<div class="layui-form-item">
			    <label class="layui-form-label">角色</label>
			    <div class="layui-input-block">
					<input v-for="(index,item) in items" type="checkbox" name="role" title="{{item.role_name}}" :value="item.guid" autocomplete="off">
			    </div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<!-- jQuery 2.2.0 -->
	<script src="../../../adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>
	<!-- jquery.cookie -->
	<script src="../../../adminlte/plugins/jQuery/jquery.cookie.js"></script>
	<script src="../../../layui/layui.js"></script>
	<script src="../../../js/byking.js"></script>
	<script src="../../../js/byking-verify.js"></script>
	<script src="../../../js/hostconfig.js"></script>
	<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

	<script>
	
	
	var guid = $byking.getUrlParam("guid");
	
  	var data = {
		items:null
    };
  	
 	var addsysuser = new Vue({
        el: "#addsysuser",
        data: data
    });
		
 	function initPage(){
		var url = $hostconfig.sysAuthHost+"/department/roles?guid="+guid;
		$byking.getJSONWithToken(url,function(data){
			//addsysuser.setRoles(data.data);
			addsysuser.items = data.data;
			setTimeout(function () { 
				var form = layui.form();
				form.render("checkbox");
		    }, 100);
		},function(data){});
	}
 		
  	initPage();
  	
  	  
  	
	layui.use('form', function() {
		var form = layui.form();
		
		layui.upload({
		  	  url: $hostconfig.sysAuthHost+"/user/add"
		  	  ,success: function(res, input){
		  	    console.log(res); //如：{"code":0 ,"msg":"","url":"http://cdn.abc.com/123.jpg"'} 
		  	  }
		  	});
		
		//验证提交
		form.verify({  
			username: function(value) {  
	          if (!$bykingVerify.checkSpecialChar(value)) {
	        	return '字母开头，允许5-16字节，允许字母数字下划线';
	          }
	        }
  			,name: function(value) {
  				if(value.length == 0){  
					return '姓名必须填写';
				}
				if(value.length > 10){  
					return '姓名至多得10个字符';
				}
				if(!$bykingVerify.checkRule1(value)) {
					return '名字只能包括中文、英文、数字包括下划线';
				}
			}
		});
		
		//监听提交
		form.on('submit(formDemo)', function(data) {
			//layer.msg(JSON.stringify(data.field));
			var data = data.field;
			
			if ($("input[name='role']:checked").length == 0) {
				layer.msg("没有选择角色！");
				return false;
			}
			
			var selectedIds = [];
			
			$("input[name='role']:checked").each(function() {
				selectedIds.push($(this).attr("value"));
			});
			
			var newData = {
				username: data.username,
				dep_guid: guid,
				name: data.name,
				sex: data.sex,
				phone: data.phone,
				status: data.status,
				if_del: "0",
				creator_by : $byking.getCookieValue("user_guid"),
				roleGuids: selectedIds
			};
			$byking.postJSONWithToken($hostconfig.sysAuthHost+"/user/add",newData,function(data){
				layer.msg("ok");
				var index = parent.layer.getFrameIndex(window.name);
				parent.refrehUserList();
				parent.layer.close(index);
			},function(data){
				alert(data.responseJSON.message);
			});
			return false;
		});
	});
	</script>
</body>
</html>